<?php
    $this->layout('base.phtml', [
        'title' => _('Collection illustration'),
        'canonical' => url_full('edit image collection', ['id' => $collection->id]),
        'has_errors' => $error || $errors,
        'modal_enabled' => true,
    ]);
?>

<div class="section">
    <div class="section__title">
        <h1 id="modal-title"><?= _('Collection illustration') ?></h1>
    </div>

    <div class="section__intro">
        <p>
            <?= protect($collection->name) ?>
        </p>

        <p>
            <?= _('Illustrations help to distinguish your collection among the others.') ?>
        </p>
    </div>

    <form
        method="post"
        action="<?= url('update image collection', ['id' => $collection->id]) ?>"
        data-controller="autosubmit form-file"
        enctype="multipart/form-data"
    >
        <?= $this->include('alerts/_error.phtml', ['message' => $this->safe('error')]) ?>

        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
        <input type="hidden" name="from" value="<?= $from ?>" />

        <input
            type="file"
            name="image"
            id="image"
            accept="image/png, image/jpeg"
            data-action="autosubmit#submit"
            data-form-file-target="file"
            hidden
        />

        <div class="form__actions">
            <button
                type="button"
                class="button--primary"
                data-action="form-file#openFile"
                data-autosubmit-target="actionButton"
                aria-describedby="file-desc"
            >
                <?= _('Upload an image') ?>
            </button>
        </div>

        <div id="file-desc">
            <?php if (isset($errors['image_filename'])): ?>
                <p class="form-group__error">
                    <span class="sr-only"><?= _('Error') ?></span>
                    <?= $errors['image_filename'] ?>
                </p>
            <?php endif; ?>

            <p class="form-group__caption text--centered">
                <?= _('<abbr>PNG</abbr> or <abbr>JPG</abbr> images only.') ?><br />
                <?= _('The minimum recommended dimensions are 1100x400px.') ?>
            </p>
        </div>
    </form>
</div>
